<template>
  <a :class="getClassByType()" @click="$emit('click')">{{title}}</a>
</template>

<script>
  export default {
    name: 'EduLabelButton',
    props: {
      type: String,
      title: "",
    },
    methods: {
      getClassByType() {
        if (this.type != null && this.type != '') {
          return "button_default color_" + this.type;
        }
        return 'button_default '
      }
    }
  }
</script>

<style scoped>
  .button_default{
    font-family: Microsoft YaHei;
    text-decoration: underline;
    font-size: 18px;
    font-weight: bold;
  }

  .button_default:focus,.button_default:active:focus,.button_default.active:focus,.button_default.focus,.button_default:active.focus,.button_default.active.focus {
    outline: none;
    border-color: transparent;
    box-shadow:none;
  }

  .button_default:hover{
    opacity: 0.7;
  }

  .color_1{
    color: #00bad0;
  }
  .color_2{
    color: #00d09d ;
  }
  .color_3{
    color: #0098f8 ;
  }
  .color_4{
    color: #fc8950;
  }
  .color_5{
    color: #fc9d50;
  }
</style>